<template>
	<view>
		<uvsticky offset-top="0">
			<view class="tops">
				<uvtabs current="0" :list="dataList" @click="gettab" lineColor="#ff4a82" :activeStyle="{ color: '#ff4a82', fontWeight: 'bold'}"></uvtabs>
			</view>
		</uvsticky>
		<view class="psd">
			<view class='kong' v-if="shopList.length==0">
				<view class="kong-img">
					<image mode="widthFix" src="/static/image/no.png" class="iconsss"></image>
				</view>
				<view class="kong-p">暂无数据哦~</view>
			</view>
			<view class="hebox" v-else>
				<view class="probox" v-for="item in shopList" :key="item.id" @click="goBuy(item.id)">
					<image :src="imgUrl+item.pro_pic" mode="scaleToFill" class="img2"></image>
					<view class="procent">
						<view class="dunzizhus"> {{item.pro_name}} </view>
						<view class="dunziss">
							<text class="text-price">{{Number(item.sale_price).toFixed(2)}}</text>
							<text class="textku">{{item.count_sales?item.count_sales:'0'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiPb , apiPblist } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	import uvtabs from '@/uni_modules/uv-tabs/components/uv-tabs/uv-tabs';
	
	const idx = ref('');
	const dataList = ref([]);
	const shopList = ref([]);
	const imgUrl = ref('https://m.aqbwg.cn/sourse/xiaowan/product/');
	
	const getShop = async() => {
		try {
			let res = await apiPb({ tid: 76, mid: 133 });
			const data = res.data.object;
			const one = { name: "全部", id: 0 }
			data.unshift(one);
			dataList.value = data;
			idx.value=data[0].id;
			getShoplist();
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getShoplist = async() => {
		try {
			let res = await apiPblist({ typeid:idx.value , mid: 133 , ishot:1 });
			const data = res.data.object;
			shopList.value = data;
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const gettab=(e)=>{
		idx.value=e.id;
		shopList.value=[];
		getShoplist();
	};
	const goBuy=(e)=>{ uni.navigateTo({ url: '/pagesA/business/product?id='+e }) };
	
	onLoad((option) => {
		uni.setNavigationBarTitle({ title: option.title });
		getShop();
	});
</script>

<style lang="scss" scoped>
	.tops{
		background-color: #fff;
	}
	.psd{
		padding: 20rpx;
		.hebox {
			display: grid;
			grid-template-columns: repeat(2, 340rpx);
			grid-gap: 30rpx;
		
			.probox {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
		
				.img2 {
					width: 340rpx;
					height: 340rpx;
				}
			}
			.procent{
				display: flex;
				flex-direction: column;
				padding: 10rpx;
				.dunziss{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.dunzizhus {
					font-size: 28rpx;
				}
				.text-price {
					margin-top: 12rpx;
					color: #ff0000;
					font-size: 26rpx;
				}
				
				.text-price::before {
					content: '￥';
					color: #ff0000;
					font-size: 22rpx;
				}
				.textku {
					margin-top: 12rpx;
					color: #747474;
					font-size: 22rpx;
				}
				
				.textku::before {
					content: '已售';
					color: #747474;
					margin-right: 6rpx;
				}
			}
		}
		.kong {
			width: 80%;
			margin: 240upx auto 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-size: 22rpx;
			.kong-img {
				display: flex;
				justify-content: center;
			}
			.kong-p {
				text-align: center;
				color: #838383;
				margin-top: 10rpx;
			}
			
			.iconsss{
				width:160rpx;
			}
		}
	}
</style>
